<template>
	<transition name="slide">
		<music-list :rank="rank" :title="title" :bgImage="bgImage" :songs="list"></music-list>
	</transition>
</template>

<script>
	import MusicList from '@/components/music-list/music-list';
	import { getTopDetail } from '@/service/rank';
	import { processSongs } from '@/service/song';
	import { mapGetters } from 'vuex';

	export default {
		name: 'TopList',
		data() {
			return {
				list: [],
				rank: true
			}
		},
		computed: {
			title() {
				return this.topList.name;
			},
			bgImage() {
				return this.topList.pic;
			},
			...mapGetters(['topList'])
		},
		async activated() {
			if (!this.topList.id) {
				this.$router.push('/rank');
				return;
			}
			const data = await getTopDetail(this.topList);
			const list = await processSongs(data.songs);
			this.list = list;
		},
		deactivated() {
			setTimeout(() => {
				this.list = [];
			}, 500);
		},
		components: {
			MusicList
		}
	}
</script>

<style lang="stylus" scoped>
	.slide-enter-active, .slide-leave-active
		transition: all 0.3s
	.slide-enter, .slide-leave-to
		transform: translate3d(100%, 0, 0)
</style>
